<template>
  <div class="form-container">
    <div class="form-contain">
      <div class="author">
        <template v-if="list.isAnonymous">
          <img :src="'http://zctuchuang.oss-cn-shenzhen.aliyuncs.com/'+list.postUserFace" alt="" class="author-img">
          <div class="author-name" @click="navToUser(list.postUid)">{{ list.postUserName }}</div>
        </template>
        <template v-else>
          <img :src="'http://zctuchuang.oss-cn-shenzhen.aliyuncs.com/'+list.postUserFace" alt="" class="author-img">
          <div class="author-name">匿名</div>
        </template>

<!--        <a-button type="primary" class="focus">关注</a-button>-->
      </div>
      <div class="content-container">
        <div class="flex form-header">
          <div class="flex">
            <div class="form-title">
              {{ list.postTitle }}
              <div class="title-time">
                发表于 {{ list.createTime }}
                <span class="title-num">热度：{{ list.postHot }}</span>
              </div>
            </div>
          </div>
          <div class="form-title-return" @click="returnLastPage">返回></div>
        </div>
        <div class="item-content">
          {{ list.postText }}
        </div>
        <div class="list-margin">
          <a-row :gutter="16">
            <a-col :span="8" v-for="(item, index) in list.postImage" :key="index">
              <img :src="item.src" alt="" class="item-img">
            </a-col>
          </a-row>
        </div>

        <!--   帖子评论区     -->
        <a-list
          v-if="list.commentVOList.length"
          :data-source="list.commentVOList"
          :header="`${list.commentVOList.length} ${list.commentVOList.length > 1 ? 'replies' : 'reply'}`"
          item-layout="horizontal"
        >
          <a-list-item slot="renderItem" slot-scope="item, index">
            <a-comment
              :author="item.commentUid"
              :avatar="'http://zctuchuang.oss-cn-shenzhen.aliyuncs.com/'+item.userFace"
              :content="item.commentText"
              :datetime="item.createTime"
            >
              <template slot="actions">
                <span key="comment-basic-like" @click="deleteComment(item)" v-if="item.commentUid === userName">
                  <a-tooltip title="Like">
                    <a-icon type="delete" :theme="action === 'delete' ? 'filled' : 'outlined'" />
                  </a-tooltip>
                  <span style="padding-left: '8px';cursor: 'auto'">
                    删除
                  </span>
                </span>
              </template>
            </a-comment>
          </a-list-item>
        </a-list>
        <a-comment>
          <a-avatar
            slot="avatar"
            :src="'http://zctuchuang.oss-cn-shenzhen.aliyuncs.com/'+userAvatar"
            alt="Han Solo"
          />
          <div slot="content">
            <a-form-item>
              <a-textarea :rows="4" :value="value" @change="handleChange" />
            </a-form-item>
            <a-form-item>
              <a-button :loading="submitting" type="primary" @click="addComments">
                添加评论
              </a-button>
            </a-form-item>
          </div>
        </a-comment>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import {getPostDetail, addComment, deleteComment} from "../api";
export default {
  name: "CommunicationDetail",
  data() {
    return {
      list: {},
      comments: [],
      submitting: false,
      value: '',
      moment,
      userAvatar: window.localStorage.getItem('avatar'),
      userName: window.localStorage.getItem('userName'),
      postId: ''
    }
  },
  created() {
    //列表查询
    this.getDetail()
  },
  methods: {
    //帖子详情
    getDetail(){
      this.userAvatar = window.localStorage.getItem('avatar')
      this.userName = window.localStorage.getItem('userName')
      this.postId = this.$route.params.postId
      let params = {
        postId: this.postId
      }
      console.log('帖子', params)
      getPostDetail(params)
        .then((res) => {
          if (res.status == 200){
            this.list = res.data
          }
          else{
            this.$message.info(res.msg)
          }
        })
    },
    //删除评论
    deleteComment(item) {
      let params = {
        commentId: item.commentId
      }
      deleteComment(params)
          .then((res) => {
            if (res.status == 200){
              this.$message.success('删除评论成功！')
              this.getDetail()
            }
            else{
              this.$message.info(res.msg)
            }
          })
    },
    //返回上一页面
    returnLastPage() {
      this.$router.back()
    },
    //跳转到发帖人详情页
    navToUser(id) {
      this.$router.push({name: 'userDetail', params: {userId: id}})
    },
    //添加评论
    addComments() {
      this.submitting = true;
      let params = {
        commentPid: this.list.postId,
        commentText: this.value,
        commentUid: window.localStorage.getItem('userName')
      }
      addComment(params)
        .then((res) => {
          if (res.status == 200){
            this.$message.success('添加评论成功！')
            this.submitting = false
            this.getDetail()
          }
          else{
            this.$message.info(res.msg)
          }
        })
    },
    handleChange(e) {
      this.value = e.target.value;
    },
  }
}
</script>

<style scoped>
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}
.form-container {
  display: flex;
  justify-content: center;
}
.form-contain {
  width: 1200px;
  padding: 0px 30px 0px 30px;
  border-radius: 10px;
  border: 1px solid #5DD5C8;
  margin: 50px 0px;
  display: flex;
}
.form-header {
  font-size: 18px;
  font-weight: bold;
  padding: 20px 20px 5px 20px;
  border-bottom: 1px solid #97f3e9;
}
.form-title-return {
  font-size: 16px;
  color: rgba(59, 57, 57, 0.65);
  cursor: pointer;
}
.form-title-return:hover {
  color: #5DD5C8;
}
.item-content {
  margin-top: 20px;
  text-indent: 2em;
  color: rgba(68, 63, 63, 0.85);
  font-size: 16px;
}
.item-img {
  width: 100%;
}
.list-margin {
  margin-top: 20px;
}
.title-time {
  font-size: 15px;
  font-weight: lighter;
  margin-top: 5px;
  color: #90cdcd;
}
.author-img {
  width: 100px;
  border-radius: 50%;
  margin-top: 20px;
}
.author {
  border-right: 1px solid #5DD5C8;
  margin-right: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.author-name {
  font-size: 16px;
  text-align: center;
  margin-top: 10px;
  font-weight: bold;
  cursor: pointer;
  color: #686767;
}
.author-name:hover {
  color: #5DD5C8;
}
.content-container {
  margin-bottom: 30px;
  width: 100%;
}
.focus {
  margin-top: 7px;
}
.title-num {
  margin-left: 20px;
  color: #f67587;
}
</style>